<template>
  <!-- 头部信息盒子 -->
  <header>
    <div class="box">
      编辑数量
      <div class="message" v-text="auditorNumber"></div>
    </div>
    <div class="box">
      审批稿件数
      <div class="message" v-text="approvePeriodicals"></div>
    </div>
    <div class="box">
      打回稿件数
      <div class="message" v-text="returnIssue"></div>
    </div>
    <div class="box">
      敏感词数
      <div class="message" v-text="sensitiveWords"></div>
    </div>
  </header>
  <nav>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="编辑管理">
        <div class="container">
          <div class="box1">
            <el-input type="text" placeholder="查找姓名" />
            <el-button type="info" plain>搜索</el-button>
          </div>
          <div class="box2">
            <el-button type="success" plain>增加编辑</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
        <el-table :data="authorData" stripe style="width: 100%" fit>
          <el-table-column type="index" width="50" />
          <el-table-column prop="username" label="姓名" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="gender" label="性别" align="center" />
          <el-table-column
            prop="periodicalNumber"
            label="审批的稿件数"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="150"
            align="center"
          >
            <template #default>
              <el-button link type="danger" size="small">封禁用户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
        />
      </el-tab-pane>

      <el-tab-pane label="被封禁编辑">
        <div class="container">
          <div class="box1">
            <el-input type="text" placeholder="查找姓名" />
            <el-button type="info" plain>搜索</el-button>
          </div>
        </div>
        <!-- 表格信息 -->
        <el-table :data="banedData" stripe style="width: 100%" fit>
          <el-table-column type="index" width="50" />
          <el-table-column prop="username" label="姓名" align="center" />
          <el-table-column prop="nickname" label="昵称" align="center" />
          <el-table-column prop="password" label="密码" align="center" />
          <el-table-column prop="gender" label="性别" align="center" />
          <el-table-column
            prop="periodicalNumber"
            label="审批的稿件数"
            align="center"
          /><el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
          /><el-table-column
            prop="updateTime"
            label="修改时间"
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            min-width="150"
            align="center"
          >
            <template #default>
              <el-button link type="success" size="small">解封</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
          :page-size="20"
          :pager-count="11"
          layout="prev, pager, next"
          :total="1000"
      /></el-tab-pane>
    </el-tabs>
  </nav>
</template>
<script setup>
import { ref } from "vue";
const auditorNumber = ref("1" + "位");
const approvePeriodicals = ref("2" + "篇");
const returnIssue = ref("0" + "篇");
const sensitiveWords = ref("2" + "个");

// 表格信息
const authorData = [
  {
    username: "1965195421",
    nickname: "启迪",
    password: "123456",
    gender: "男",
    periodicalNumber: 2,
  },
];

// 封禁用户信息
const banedData = [
  {
    username: "264328912",
    nickname: "张三",
    password: "123456",
    gender: "男",
    periodicalNumber: 131,
  },
  {
    username: "9011332432",
    nickname: "李四",
    password: "123456",
    gender: "女",
    periodicalNumber: 0,
  },
];
</script>

<style scoped>
header {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平均匀分布 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 30px;
  padding: 20px;
}
.box {
  position: relative;
  height: 80px;
  width: 20%;
  text-align: center;
  font-size: 26px;
  line-height: 60px;
  font-weight: bold;
  color: #2d3645;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px 0px;
  transition: box-shadow 0.4s ease-in-out;
}
.box:nth-child(1) {
  background: linear-gradient(45deg, #ffbc00, #ff0058);
  box-shadow: 0 0 20px 5px rgba(255, 69, 0, 0.2),
    0 0 20px 10px rgba(255, 0, 0, 0.2);
}
.box:nth-child(2) {
  background: linear-gradient(
    to right,
    rgb(134, 239, 172),
    rgb(59, 130, 246),
    rgb(147, 51, 234)
  );
  box-shadow: 0 0 20px 5px rgba(134, 239, 172, 0.2),
    0 0 20px 10px rgba(147, 51, 234, 0.2);
}
.box:nth-child(3) {
  background: linear-gradient(
    to right,
    rgb(199, 210, 254),
    rgb(254, 202, 202),
    rgb(254, 249, 195)
  );
  box-shadow: 0 0 20px 5px rgba(244, 182, 182, 0.2),
    0 0 20px 10px rgba(239, 234, 175, 0.2);
}
.box:nth-child(4) {
  background: linear-gradient(
    to right,
    rgb(147, 197, 253),
    rgb(187, 247, 208),
    rgb(253, 224, 71)
  );
  box-shadow: 0 0 20px 5px rgba(147, 197, 253, 0.2),
    0 0 20px 10px rgba(253, 224, 71, 0.2);
}
.message {
  position: absolute; /* 小盒子绝对定位 */
  top: 70%; /* 垂直靠下 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 细调居中位置 */
  width: 80%; /* 小盒子的宽度 */
  height: 80%; /* 小盒子的高度 */
  color: #656363;
  font-size: 20px;
  text-align: center; /* 文本居中 */
  line-height: 80px; /* 垂直居中文本 */
}
::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active),
::v-deep(
    .el-tabs--border-card
      > .el-tabs__header
      .el-tabs__item:not(.is-disabled):hover
  ) {
  color: var(--jiqiu-color);
}

/* 标签页内部元素样式 */
.container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平方向上均匀分布剩余空间，使box2靠右 */
}

.box1 {
  display: flex; /* 输入框和按钮水平排列 */
  align-items: center; /* 垂直居中 */
}

.box1 .el-input,
.box1 .el-button,
.box2 .el-button {
  margin-right: 5px; /* 输入框和按钮之间的间距 */
}

/* 最后一个按钮不需要右边距 */
.box2 .el-button:last-child {
  margin-right: 0;
}

/* 输入框样式 */
::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: inset 0 0 0 1px var(--jiqiu-color);
}
</style>
